<template>
  <div>
    <basic-container>
      <avue-form
        ref="form"
        :option="addOption"
        v-model="formData"
        @submit="submit"
        @reset-change="emptytChange"
        :loading="loading"
      >
        <!-- 商家 -->
        <template slot="merchantId" slot-scope="scope">
          <el-select
            v-model="merchantId"
            filterable
            remote
            placeholder="请输入商家"
            :remote-method="getMerchant"
          >
            <el-option
              v-for="item in merchantOptions"
              :key="item.merchantId"
              :label="item.merchantName"
              :value="item.merchantId"
            ></el-option>
          </el-select>
        </template>
        <!-- 角色 -->
       <template slot="roleIds" slot-scope="scope">
          <avue-select
            v-model="formData.roleIds"
            :dic="rolesOptions"
            :props="roleProps"
            type="select"
            multiple
            placeholder="请选择角色"
            @change="selectRole"
          />
        </template>
        <!-- 详细地址 -->
        <template slot="address" slot-scope="scope">
          <el-input v-model="position.formattedAddress"></el-input>
        </template>
        <!-- 选择坐标 -->
        <template slot="position" slot-scope="scope">
          <div>
            <p>{{ position.formattedAddress }}</p>
            <avue-map v-model="position" :lnglat="lnglat" style="width:200px"></avue-map>
          </div>
        </template>
        <!-- 地址区域 -->
        <template slot="area" slot-scope="scope">
          <el-input v-model="position.addressComponent.province"></el-input>
        </template>

        <!-- 部门 -->
        <template slot-scope="scope" slot="deptId">
          <avue-input-tree
            v-model="formData.deptId"
            :dic="treeDeptData"
            :props="defaultProps"
            type="tree"
            :defaultExpandAll="true"
            placeholder="请选择所属部门"
            @change="selectDept"
          />
        </template>

        <template slot-scope="scope" slot="menuForm">
          <el-button @click="cancel">取消</el-button>
        </template>
      </avue-form>
    </basic-container>
  </div>
</template>

<script>
import { addOption } from "../../../const/crud/pds/merchant/buyerAdd";
// 新增接口
import { addObj, getMerchantObj } from "../../../api/saleb/buyerAdd";
// 获取部门信息
import { fetchTree } from "@/api/admin/dept";
// 获取角色
import { deptRoleList } from "@/api/admin/role";
export default {
  data() {
    return {
      loading: false,
      formLoading: false,
      addOption: addOption,
      merchantId: "",
      formData: {},
      merchantOptions: [],
      deptId: "",
      position: {
        area: "",
        formattedAddress: "",
        addressComponent: {
          city: "",
          district: "",
          province: "",
          township: ""
        },
        longitude: "",
        latitude: ""
      },
      // 部门
      dept: "",
      treeDeptData: [],
      defaultProps: {
        label: "name",
        value: "id",
        children: "children"
      },
      // 初始化坐标
      lnglat: {
        P: 29.563761,
        R: 106.55046400000003
      },
      // 角色
      roleIds: "",
      role: "",
      roleProps: {
        label: "roleName",
        value: "roleId"
      },
      rolesOptions: [],
    };
  },
  created() {
    this.getNodeData();
  },
  mounted() {
    // 获取部门信息
    this.getDtp();
    this.getMerchant();
  },
  methods: {
    // 获取商家信息
    getMerchant(query) {
      // 传值
      let params = {
        current: "",
        size: "",
        status: 2,
        merchantName: query
      };
      getMerchantObj(params).then(res => {
        if (res.status !== 200) {
          return this.$message.success("获取失败");
        }
        this.merchantOptions = res.data.data.records || {};
      });
    },
    // 标注位置
    changePosition(data) {
      this.categoryForm.address = data.formattedAddress;
      this.categoryForm.province = data.province;
    },
    emptytChange() {
      this.$message.success("清空方法回调");
    },

    // 点击按钮
    submit(from, done) {
      
      console.log(from);
      this.$refs.form.validate(item => {
        console.log(item);
      });
      // 地址
      from.address = this.position.formattedAddress;
      from.province = this.position.province;
      from.roleIds = this.role.join(",");
      // 经度
      from.longitude = this.lnglat.P;
      // 纬度
      from.latitude = this.lnglat.R;
      let arr = [this.lnglat.R, this.lnglat.P];
      from.position = arr.join(",");
      from.merchantId = this.merchantId;
      from.deptId = this.deptId;
      from.area = this.position.addressComponent.province;

      addObj(from)
        .then(res => {
          done();
          if (res.status !== 200) {
            return this.$message.success("添加失败");
          } else {
            this.$message.error("有必填项未填写!");
          }

          this.$message.success("添加成功");
          this.$store.commit("DEL_ONE_TAG", this.$route);
          this.$router.push("buyerList");
        })
        .catch(() => {
          done();
        });

      // console.log(from);
      done();
      // this.loading = false;
    },
    // 取消按钮
    cancel() {
      this.$store.commit("DEL_ONE_TAG", this.$route);
      this.$router.push("buyerList");
    },
    // 获取部门信息
    getDtp() {
      fetchTree().then(response => {
        this.treeDeptData = response.data.data;
      });
    },
    // 角色权限
    getNodeData() {
      deptRoleList().then(response => {
        this.rolesOptions = response.data.data.filter(
          item => item.roleCode.toUpperCase() !== "ROLE_ADMIN"
        );
      });
    },
    // 下拉角色选择
    selectRole(value) {
      this.role = value;
    },
    // 下拉部门选择
    selectDept(value) {
      this.dept = value;
    }
  }
};
</script>

<style>
</style>
